<template>
	<view class="buyBox">
		<view class="buyBox_bg-color"></view>
		<view class="shopmsg">
			<text class="iconfontPT icondingwei"></text>
			<text class="title">
				门店位置
			</text>
			<view class="address">
				<view class="bottomleft" @click="handleLocation(shopmsg.address, shopmsg.latitude, shopmsg.longitude)">
					{{shopmsg.address}}</view>
			</view>
		</view>
		<view class="goodsListBox">
			<view class="goodsItem" v-for="(item,index) in goods" :key="index">
				<image :src="carHost+item.img"></image>
				<view class="goodsmsg">
					<view class="title">{{item.title}}</view>
					<view class="zekou">
						<text class="zekou_txt">{{item.zekou}}折</text>
					</view>
					<view class="price">
						<text class="plat-price">
							<text class="plat-price_currency">￥</text>{{item.plat_price}}
						</text> 
						<text class="ori-price">{{`￥${item.price}`}}</text>
					</view>
				</view>
				<view class="buy">
					<text class="buy_icon iconfontPT iconminus" @click="remove(item)"></text>
					<!-- <text class="buyButton" @click="remove(item)">-</text> -->
					<text class="buy_num">{{item.num}}</text> 
					<!-- <text class="buyButton" @click="add(item)">+</text> -->
					<text class="buy_icon iconfontPT iconadd_3"  @click="add(item)"></text>
				</view>
			</view>
		</view>
		<view class="quanshowbox" @click="getquanlist">
			<view class="name">
				优惠券
				<view class="quanname" @click="getquanlist">
					{{title}}
				</view>
			</view>
			<view class="money">
				共{{totalNum}}件商品 <text class="money_total">小计：</text>
				<text class="money_number">
					<text class="money_number-currency">￥</text>{{totalMoney}}</text>
			</view>
		</view>
		<view class="buyCarBox">
			<view class="tip">
				*支付成功后到店核销，享受优质服务
			</view>
			<view class="contant">
				<text class="iconfontPT iconlianximendian" @click="phone(phonenum)"></text>
				<text>联系门店</text>
			</view>
			<view class="pricetotal">
				合计：<text><text class="price-currency">￥</text> {{pay_money}}</text>
			</view>
			<view class="tobuy" @click="tobug">
				确定支付
			</view>
		</view>
		<view class="dialogBox" v-if="dialogstatus" @click="close">
			<view class="dialog">
				<view class="dialogtitle">优惠券</view>
				<view class="quanbox">
					<view class="quanitem" v-for="(item,index) in quanList" :key="index" v-if="quanList.length > 0">
						<view class="quanleft">
							<view class="name">
								<text class="activity">满{{item.full_quota}}减{{item.reduce_quota}}元</text>
							</view>
							<view class="form">
								店铺优惠券
							</view>
							<view class="time">
								{{item.begin_time}} - {{item.expire_time}}
							</view>
						</view>
						<view class="quanright">
							<text class="get" @tap.stop="getQuan(item)" v-if="item.state == 0">立即领取</text>
							<text class="get hasget" @tap.stop="syq(item)" v-else>立即使用</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		insertOrder,
		addToCart,
		delcart,
		showCartList,
		coupon,
		clean,
		getcouponShop
	} from "../../apis/shop/api.js"
	export default {
		data() {
			return {
				goods: [],
				store_id: "",
				totalMoney: 0,
				totalNum: 0,
				quanList: [],
				title: "领券",
				dialogstatus: false,
				full_quota: "",
				reduce_quota: "",
				coupon_id: "",
				img: [],
				goods_id: [],
				num: [],
				order_no: "",
				shopmsg: "",
				pay_money: "",
				order_title: "",
				item_id: [],
				phonenum: "",
				hasCoupons: true
			}
		},
		onLoad(option) {
			this.store_id = option.store_id;
			this.phonenum = option.phonenum
			let that = this
			that.shopmsg = uni.getStorageSync("shopMsg")
			this.getList();
			this.getCouponList();
		},
		onShow() {
			this.getList();
			this.getCouponList();
		},
		computed:{
			carHost(){
				return this.$baseHost.car
			}
		},
		methods: {
			handleLocation(address, latitude, longitude) {
				let params = {
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					name: '',
					address
				}
				uni.openLocation(params)
			},
			phone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			syq(item) {
				this.title = '满' + item.full_quota + '减' + item.reduce_quota
				this.coupon_id = item.id
				this.reduce_quota = item.reduce_quota
				this.pay_money = +this.pay_money - +item.reduce_quota
				this.close()
			},
			close() {
				this.dialogstatus = false
			},
			getQuan(item) {
				if (item.state == 0) {
					let that = this
					getcouponShop({
						store_id: this.store_id,
						id: item.id
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '领取成功',
							});
							that.getquanlist()
						} else {
							uni.showToast({
								title: '领取失败',
							});
						}
					})

					this.dialogstatus = false;

					this.full_quota = item.full_quota;
					this.coupon_id = item.id;
					this.district_money = item.reduce_quota;
					this.pay_money = this.totalMoney - item.reduce_quota;
				}

			},
			getCouponList() {
				coupon({
					store_id: this.store_id
				}).then(res => {
					this.quanList = res.data;
					
					this.hasCoupons = res.data && res.data.length > 0;
					
					if(!this.hasCoupons) {
						this.title = '暂无优惠券';
					}
					
					console.log(this.hasCoupons, 'this.hasCoupons');
				})
			},
			getquanlist() {
				if(!this.hasCoupons) {
					return;
				}
				
				this.dialogstatus = true;
				coupon({
					store_id: this.store_id
				}).then(res => {
					this.quanList = res.data
				})
				
				console.log(this.dialogstatus, 'dialogstatus');
			},
			remove(item) {
				let that = this
				delcart({
					store_id: that.store_id,
					gid: item.goods_id
				}).then(res => {
					if (res.code == 200) {
						if (item.id) {
							uni.showToast({
								title: "添加成功",
								duration: 2000
							});
						}
						this.getList()
					}
				})
			},
			getList() {
				let that = this
				showCartList({
					store_id: that.store_id
				}).then(res => {
					that.goods = res.data;
					that.totalMoney = 0;
					that.totalNum = 0;
					that.img = [];
					that.goods_id = [];
					that.num = [];


					that.goods.forEach(item => {


						that.totalNum += parseInt(item.num);
						item.zekou = (parseFloat(parseFloat(item.plat_price) / parseFloat(item.price)) * 10).toFixed(1);
						that.totalMoney += parseFloat(parseInt(item.num) * parseFloat(item.plat_price));


						that.img.push(item.img)

						if (item.package != "") {
							that.item_id.push(item.goods_id)

						} else {
							that.goods_id.push(item.goods_id)
						}
						that.num.push(item.num)
					})
					that.totalMoney = that.totalMoney.toFixed(2)
					that.pay_money = that.totalMoney
					if (!res.data.length) {
						uni.showToast({
							title: '请先选购菜品',
						})
						setTimeout(() => {
							const {
								latitude,
								longitude
							} = uni.getStorageSync('location')
							const {
								id
							} = uni.getStorageSync("shopMsg");
							uni.reLaunch({
								url: `/pages/shop/shopinfo?store_id=${id}&latitude=${latitude}&longitude=${longitude}`
							})
						}, 1000)
					}
				})


			},
			tobug() {
				let that = this
				that.img = [];
				that.goods_id = [];
				that.num = [];

				that.order_title = '';
				that.goods.forEach(item => {
					that.img.push(item.img)
					that.goods_id.push(item.goods_id)

					that.order_title += item.title + 'x' + item.num + '+';
					that.num.push(item.num)
				})
				
				// 删除最后一个 “+” 号
				that.order_title = that.order_title.slice(0,that.order_title.length - 1)

				let factory_id = "";
				uni.getStorage({
					key: 'factory_id',
					success(e) {
						factory_id = e.data
					}
				})


				uni.getStorage({

					key: 'userInfo',
					success(e) {

						let userinfo = e.data;
						let params = {};
						params.factory_id = factory_id;
						params.store_id = that.store_id;
						params.total_money = that.totalMoney;
						params.pay_money = that.pay_money;
						params.district_money = that.reduce_quota;
						params.item_id = that.item_id.join(",");
						params.coupon_id = that.coupon_id;
						params.num = that.num.join(",");
						params.goods_id = that.goods_id.join(",");
						params.img = that.img.join(",");
						params.type = 1;
						params.order_title = that.order_title
						uni.showToast({
							title: '加载中',
							icon: 'loading',
							duration: 10000000,
							mask: true,
						});
						uni.getProvider({
							service: 'payment',
							success(reson) {
								insertOrder(params).then(res => {
									let result = res.data.data //接口返回数据
									uni.showToast({
										title: '加载中',
										icon: 'loading',
										duration: 10000000,
										mask: true,
									});
									console.log(res.data)
									if (res.code == 1) {
										uni.hideToast();
										uni.requestPayment({ //下面参数为必传
											appId: res.data.appId, //小程序Appid
											timeStamp: res.data.timeStamp, //创建订单时间戳
											nonceStr: res.data.nonceStr,
											package: res.data.package, // 订单包
											signType: 'MD5', // 加密方式统一'MD5'
											paySign: res.data.paySign, // 后台支付签名返回
											success(res) {
												uni.showToast({
													title: '支付成功！',
													icon: 'success'
												})
												clean({

													store_id: that.store_id
												}).then(res => {

												})
												uni.navigateTo({

													url: "/pages/personal/order/index?state=0"
												})
											},
											fail(err) {
												uni.showToast({
													title: '支付失败！',
													icon: 'success'
												})
											}
										})
									}
								})
							}
						})
					}
				})
			},

			add(item) {
				let that = this
				let gid = item.goods_id || item.id
				addToCart({
					store_id: that.store_id,
					gid: gid
				}).then(res => {
					if (res.code == 200) {
						if (item.id) {
							uni.showToast({
								title: "添加成功",
								duration: 2000
							});
						}
						this.getList()
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.quanshowbox {
		width: 690rpx;
		height: 177rpx;
		margin-top: 30rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.08);
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.name {
			color: #333333;
			font-size: 30rpx;

			.quanname {
				float: right;
				font-size: 28rpx;
				color: #E31600;
			}
		}

		.money {
			text-align: right;
			margin-top: 48rpx;
			font-size: 24rpx;
			color: #333;
			
			.money_total {
				margin-left: 30rpx;
			}

			.money_number {
				font-size: 36rpx;
				color: #E31600;
				
				&-currency {
					font-size: 24rpx;
				}
			}
		}
	}

	.dialogBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);

		.dialog {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 980rpx;
			background-color: #fff;

			.dialogtitle {
				text-align: center;
				color: #E41805;
				line-height: 88rpx;
			}

			.quanbox {
				box-sizing: border-box;
				width: 100%;
				padding: 0 30rpx 30rpx 30rpx;

				.quanitem {
					background-color: #fff3f5;
					color: #676767;
					margin-top: 20rpx;
					padding: 15rpx 0;

					&::after {
						content: "";
						display: block;
						height: 0;
						overflow: hidden;
						clear: both;
					}

					.quanleft {
						width: calc(~"100% - 230rpx");
						float: left;
						padding-left: 15rpx;

						.name {
							font-size: 26rpx;
							color: #E41805;
						}

						.form {
							font-size: 24rpx;
							color: #666;
							margin: 15rpx 0;
						}

						.time {
							font-size: 24rpx;
							color: #676767;
						}
					}

					.quanright {
						width: 210rpx;
						float: right;
						padding: 54rpx 0;

						.get {
							display: block;
							width: 152rpx;
							height: 54rpx;
							background: linear-gradient(90deg, rgba(228, 24, 5, 1) 0%, rgba(253, 109, 95, 1) 100%);
							color: #fff;
							margin: 0 auto;
							text-align: center;
							font-size: 24rpx;
							border-radius: 27rpx;
							line-height: 54rpx;

							&.hasget {
								background: linear-gradient(90deg, rgba(153, 153, 153, 1) 0%, rgba(204, 204, 204, 1) 100%);
							}
						}
					}
				}
			}
		}
	}

	.buyBox {
		padding: 30rpx;
		position: relative;
		
		&_bg-color {
			background-color: #E31705;
			height: 160rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}

		.shopmsg {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow:0px 2px 10px 0px rgba(0, 0, 0, 0.08);

			.title {
				color: #333;
				font-size: 24rpx;
				margin-left: 10rpx;
				font-weight:500;
			}

			.address {
				font-size: 34rpx;
				color: #333;
				line-height: 48rpx;
				font-weight: bold;
				margin-top: 30rpx;

			}
		}

		.goodsItem {
			margin-top: 30rpx;
			padding: 30rpx;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
			border-radius: 10rpx;
			position: relative;

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			image {
				width: 144rpx;
				height: 144rpx;
				float: left;
				margin-right: 24rpx;
			}

			.goodsmsg {
				float: left;
				padding: 0;

				&>.title {
					text-align: left;
					color: #333;
					font-size: 30rpx;
					font-weight: 600;
				}

				.price {
					font-size: 30rpx;
					color: #E41805;
					margin-top: 16rpx;
					
					.plat-price {
						font-weight: bold;
						
						&_currency {
							font-size: 18rpx;
						}
					}

					.ori-price {
						font-size: 18rpx;
						color: #999999;
						text-decoration: line-through;
						margin-left: 10rpx;
					}
				}

			}

			.buy {
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 140rpx;
				
				// text {
				// 	display: block;
				// 	font-size: 24rpx;
				// 	color: #999;
				// 	float: left;
				// 	margin: 0 20rpx;
				// }
				.buy_icon {
					color: #999;
					font-size: 36rpx;
					
					&.iconminus {
						font-size: 41rpx;
					}
					
					&.iconadd_3 {
						color: #E41805;
					}	
				}
				
				.buy_num {
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
					position: relative;
					top: -2rpx;
				}

				.buyButton {
					width: 32rpx;
					height: 32rpx;
					border-radius: 32rpx;
					color: #666;
					font-size: 32rpx;
					border: 1rpx solid #666;
					text-align: center;
					line-height: 26rpx;
				}
			}

		}

		.buyCarBox {
			position: fixed;
			padding: 20rpx 30rpx 0 30rpx;
			left: 0;
			right: 0;
			bottom: 0;
			height: 166rpx;
			background-color: #fff;
			z-index: 999;

			.tip {
				line-height: 50rpx;
				margin: 0 -30rpx;
				text-align: center;
				color: #E31600;
				font-size: 20rpx;
				background-color: #FFE8E5;
				margin-bottom: 20rpx;
			}

			.contant {
				text-align: center;
				float: left;


				text {
					&:nth-child(1) {
						display: block;
						width: 40rpx;
						height: 40rpx;
						margin: 0 auto;
					}

					&:nth-child(2) {
						font-size: 20rpx;
						color: #666;
						line-height: 36rpx;
					}

				}
			}



			.pricetotal {
				float: left;
				font-size: 24rpx;
				color: #333;
				padding-left: 110rpx;

				text {
					font-size: 40rpx;
					color: #E31600;
				}
				
				.price-currency {
					font-size: 24rpx;
				}
			}

			.tobuy {
				float: right;
				width: 240rpx;
				height: 72rpx;
				color: #fff;
				background-color: #E41805;
				text-align: center;
				line-height: 72rpx;
				border-radius: 36rpx;
			}
		}

	}

	.zekou {
		text.zekou_txt {
			padding: 3rpx 8rpx;
			font-size: 22rpx;
			background-color: #FFE8E6;
			color: #E41805;
		}

	}
</style>
